<template>
	<view class="depart-picker" @click="onShow">
		<view class="display-text text-cut">
			{{ displayValue }}
		</view>
	</view>
	<form class="depart-selector" :class="{ 'show-dialog': showDialog }">
		<view class="cu-bar bg-blue search">
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input v-model="search" :adjust-position="false" type="text" placeholder="搜索部门名称" confirm-type="search" />
			</view>
			<view class="action" @click="onHide">
				<text class="cuIcon-close"></text>
				<text>取消</text>
			</view>
			<view class="action" @click="onSelect" v-if="current != app.GUID_EMPTY">
				<text class="cuIcon-check"></text>
				<text>确定</text>
			</view>
		</view>
		<scroll-view class="scroll-view" :scroll-y="true">
			<radio-group class="block">
				<view class="cu-form-group" v-for="(v, k) in source.entries" :key="k" @click="current = v.DataKey">
					<view class="title text-cut">
						{{ v.DataValue }}
					</view>
					<radio :class="v.DataKey === current ? 'checked' : ''" class="blue" @click="current = v.DataKey"
					:checked="v.DataKey === current"></radio>
				</view>
			</radio-group>
		</scroll-view>
	</form>
</template>

<script setup>
	import app from '@/app'
	import { ref, onMounted, watch, reactive, toRefs, computed } from 'vue'
	import { createDataSource } from './useDepartment'
	const props = defineProps({
	    value: {
	        type: String,
	        default: app.GUID_EMPTY
	    },
	})
	const schema = ref("一级部门");
	const source = reactive({
	    name: "选择部门",
	    entries: []
	});
	let emits = defineEmits(["change", "update:value"])
	let displayValue = computed(_ => {
		let entry = source.entries.find(e => e.DataKey === props.value);
		if (entry) {
			return entry.DataValue;
		}
		return props.value === app.GUID_EMPTY ? "请选择部门" : "找不到此部门,请重新选择";
	}, { immediate: true });
	function change(v) {
	    emits("update:value", v);
	    emits("change", v);
	}
	
	const showDialog = ref(false);
	const current = ref(props.value);
	const search = ref("");
	watch(() => props.value, nv => current.value = nv);
	function onShow () {
		showDialog.value = true;
	}
	
	function onHide () {
		showDialog.value = false;
	}
	
	function onSelect () {
		search.value = "";
		change(current.value);
		showDialog.value = false;
	}
	
	onMounted(_ => {
		const treeSource = createDataSource(false);
		watch(() => `${search.value}/${treeSource.ver}`, nv => {
			let entries = treeSource.query()
			                .whereIf("SchemaName", schema)
							.whereIf("Name", search)
			                .map((node) => {
			                    return {
			                        DataKey: node.ID,
			                        DataValue: node.Name,
			                    }
			                })
			                .end();
			source.entries = entries;
		}, { immediate: true })
	}) 
</script>

<style lang="less">
	.depart-selector {
		.scroll-view {
			height: calc(100vh - 100rpx);
		}
		position: fixed;
		top: 0;
		bottom: 0;
		left: -100vw;
		background: #fff;
		z-index: 999999;
		width: 100vw;
		transition: .5s all;
		&.show-dialog {
			left: 0;
		}
	}
	.depart-picker {
		flex: 1;
		padding-right: 1.25rem;
		overflow: hidden;
		position: relative;
		.display-text {
			line-height: 100rpx;
			font-size: 28rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 100%;
			text-align: right;
		}
		&::after {
			line-height: 100rpx;
			font-size: 28rpx;
			font-family: cuIcon;
			display: block;
			content: "\e6a3";
			position: absolute;
			color: #8799a3;
			width: 1.875rem;
			text-align: center;
			top: 0;
			bottom: 0;
			right: -0.625rem;
		}
	}
</style>